<template>
  <table class="table">
    <tbody>
      <tr is="Sellzu" v-for="(item, ind) in goodsArr" :key="ind" :item="item"></tr>
    </tbody>
    <tfoot>
      <tr>
        <th>All Number:</th>
        <th colspan="2">{{ sum }}</th>
        <th></th>
      </tr>
    </tfoot>
  </table>
</template>

<script>
import Sellzu from '@/components/Day/Day3/Sell/Sellzu.vue'
export default {
  components: {
    Sellzu
  },
  data() {
    return {
      goodsArr: [
        {
          count: 0,
          goodsName: 'Watermelon'
        },
        {
          count: 0,
          goodsName: 'Banana'
        },
        {
          count: 0,
          goodsName: 'Orange'
        },
        {
          count: 0,
          goodsName: 'Pineapple'
        },
        {
          count: 0,
          goodsName: 'Strawberry'
        }
      ]
    }
  },
  computed: {
    sum() {
      return this.goodsArr.reduce((acc, val) => (acc += val.count), 0)
    }
  }
}
</script>

<style></style>
